<template>
    <div class="key">
        <Header title="一键开门" >
            <img class="left" @click="back" src="../assets/turn.png" alt="">
        </Header>
        <div class="box_key"  >
            <div class="box_one"  ref="wrapper">
                <ul :style="{'width': + Width + 'px'}">
                    <li @click="open(item.lockId)" ref="li" v-for="(item,index) in list" :key="index">
                        <div>
                            <img src="../assets/icon_key_blue.png">
                            <p>{{item.lockName}}</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="btn" @click="old_retu"><img src="../assets/icon_wrong.png"></div>
        </div>
    </div>
</template>

<script>
import Header from './header'
import BScroll from 'better-scroll'
import { Toast, Indicator } from "mint-ui";
import { old_key, open_key, result } from '../old_request'
let lens = 0;
export default {
    data(){
        return {
            list:[],
            Width:0
        }
    },
    components:{
        Header
    },
    methods:{
        back(){
            this.$router.back();                //返回上一页
        },
        old_retu(){
            this.$router.back();    
        },
        open(lockId){
            let that = this;
            let data = {
                "sign":that.$md5(`${that.wrapper.globalData()}lockId=${lockId}timestamp=${that.wrapper.gettime()}`),
                "timestamp":that.wrapper.gettime(),
                "lockId":lockId,
                "mobile":that.wrapper.getlocalstoage('mobile'),
                "blockId":that.$store.state.blockid,
                "deviceInfo":'#A7892'
            }
            Indicator.open({
                text:'正在开门'
            })
            open_key(data,that).then( (res) => {
                // console.log(res)
                if(res.code === 0){
                    that.Result(res.data.id)            //开门记录ID
                }else{
                    Indicator.close();
                    Toast({
                        message: "设备已离线",
                        iconClass: "iconfont icon-cuowu",
                        duration: 1500
                    });
                }
            })
        },
        Result(id){
            let that = this;
            let data = {
                "sign":that.$md5(`${that.wrapper.globalData()}id=${id}timestamp=${that.wrapper.gettime()}`),
                "timestamp":that.wrapper.gettime(),
                "id":id,
                "mobile":that.wrapper.getlocalstoage('mobile')
            }
            let fit = 'access/' + id;
            result(fit,data,that).then( (res)=> {
                // console.log(res)
                // console.log(res.code === 0)
                if(res.code === 0){
                    if(lens < 20){              //开门状态轮询20次
                        if(res.data.status === 'T'){
                        lens = 0;
                        Indicator.close();
                        Toast({
                            message: "开门成功",
                            iconClass: "iconfont icon-success_no_circle",
                            duration: 1500
                        });
                        return false;
                    }
                    else if(res.data.status === 'F'){
                        lens+=1;
                        setTimeout(function(){
                            that.Result(id);    
                        },500)
                    }
                }else{
                    Indicator.close();
                    lens = 0;
                    Toast({
                        message: "开门失败",
                        iconClass: "iconfont icon-cuowu",
                        duration: 1500
                    });
                    return false;
                }
            }else{
                Indicator.close();
                
                Toast({
                    message: "开门失败",
                    iconClass: "iconfont icon-cuowu",
                    duration: 1500
                });
                }
            })
        }
    },
    created(){
        let that = this;
        if(that.$store.state.blockid === null){
            that.wrapper.displace(that.$store.state.blockid,'login','item',that);
        }
        let data = {
            "sign":that.$md5(`${that.wrapper.globalData()}id=${that.$store.state.cellid}timestamp=${that.wrapper.gettime()}`),
            "timestamp":that.wrapper.gettime(),
            "id":that.$store.state.cellid,
            "userId":that.$store.state.userid,
            "mobile":that.wrapper.getlocalstoage('mobile')
        }
        let parameter = 'myBlock/' + that.$store.state.cellid;
        //let parameter = that.wrapper.getlocalstoage('cellid');

        old_key(parameter,data,that).then( (res) => {
            // console.log(res)
            if(res.code === 0){
                that.list = res.data.lockList;
                that.$nextTick( () => {
                    let old = new BScroll(that.$refs.wrapper,{scrollX:true,click:true})
                    let li = that.$refs.li;
                    that.Width = that.$refs.li.length * (that.$refs.li[0].offsetWidth + 24);
                })
            }
        })

    }
}
</script>

<style scoped>
    .key{
        margin-top: 50px;
    }
    .left{
        position: absolute;
        left: -6px;
        transform: translateY(1px) !important;
        height: 22px !important;
    }
    .box_key{
        background: url('../assets/icon_key_bg@3x.png') no-repeat;
        background-size: 100% 100%;
        height: 616px;
        position: relative;
    }
    .box_one{
        position: absolute;
        bottom: 100px;
        width: 330px;
        /* height: 95px; */
        overflow: hidden;
        padding: 0px 4%;
    }
    .box_one ul{
        
        display: flex;
        
    }
    .box_one li{
        width: 100px;
        text-align: center;
        margin: 0px 10px;
    }
    .btn{
        position: fixed;
        bottom: 7px;
        left: 50%;
        transform: translateX(-50%);
    }
</style>